<template>
  <div>
    <!-- 卡片视图 -->
    <el-card shadow="always">
      <!-- 面包屑导航 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>运营</el-breadcrumb-item>
        <el-breadcrumb-item>报销分类权限</el-breadcrumb-item>
        <el-button
          type="primary"
          style="float:right;margin-right:20px"
          id="addErrand"
          @click="addErrand"
          >添加报销分类</el-button
        >
      </el-breadcrumb>
      <!-- 搜索框 -->

      <!-- 数据列表 -->
      <div class="maxdiv">
        <div class="top_main">
          <span
            @click="topClick(index)"
            v-for="(item, index) in typeList"
            :key="index"
            :class="['top_main_list', checkId == item.id ? 'clicked_top' : '']"
            >{{ item.title }} <span @click.stop="deleteExpenseCate(item)" class="delete el-icon-close"></span>
          </span>
        </div>
        <el-input
          style="width:280px;"
          placeholder="请输入姓名"
          class="search"
          v-model="searchData"
          clearable
        >
          <i slot="prefix" class="el-input__icon el-icon-search"></i>>
          <el-button slot="append" @click="searchBtn" :disabled="isDisabled"
            >搜索</el-button
          >
        </el-input>
        <!-- 添加 -->

        <div style="padding:0 30px">
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            @row-click="setRole"
          >
            <el-table-column
              type="index"
              label="#"
              width="75"
            ></el-table-column>
            <el-table-column prop="users_name" label="姓名"></el-table-column>
            <el-table-column
              prop="users_nickname"
              label="昵称"
            ></el-table-column>
            <el-table-column
              prop="users_phone"
              label="手机号"
            ></el-table-column>
            <el-table-column label="头像">
              <template slot-scope="scope">
                <img :src="scope.row.users_photo" />
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="p"
          :page-sizes="[15, 20, 50, 80]"
          :page-size="limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="count"
        ></el-pagination>
        <el-dialog
          title="添加报销分类"
          style="text-align:center"
          :visible.sync="dialogVisibleAddGroup"
          width="25%"
          @submit.native.prevent
        >
          <el-form class="demo-ruleForm" label-width="80px">
            <el-form-item label="名称:" required>
              <input type="text" class="input_" v-model="bxname" />
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="unOk">取消</el-button>
            <el-button type="primary" @click="isOk" ref="addGroupRef"
              >添加</el-button
            >
          </span>
        </el-dialog>
      </div>
    </el-card>
  </div>
</template>

<script>
import { get } from "../../../../public/API/query";
import config from "../../../../public/config";

export default {
  data() {
    return {
      //列表数据
      tableData: [],
      //查询参数
      p: 1,
      limit: 10,
      //总条数
      count: null,
      dialogVisible: false,
      currentPage4: 1,
      searchData: "",
      value: [],
      // 树形控件的属性绑定对象
      defaultProps: {
        children: "_child",
        label: "title",
      },
      bxname: "",
      treeData: [],
      dialogVisibleAddGroup: false,
      addGroupForm: {
        title: "",
      },
      //默认选择节点ID数组
      defaultKeys: [],
      isDisabled: false,
      userId: "",
      typeList: [],
      checkId: "",
    };
  },
  methods: {
    unOk() {
      this.dialogVisibleAddGroup = false;
    },
    isOk() {
      get("operate/expenseCate/addSub", { title: this.bxname }, (res) => {
        if (res.code == 200) {
          this.dialogVisibleAddGroup = false;
          this.getExpenseCate();
          this.$message.success("成功");
        }
      });
    },
    //设置权限
    setRights(value) {},
    // 重置节点ID数组
    setRightDialogClose() {
      this.defaultKeys = [];
    },
    //提交权限按钮
    commitRightsBtn() {},
    getExpenseCate() {
      get("operate/expenseCate/getExpenseCate", {}, (res) => {
        this.typeList = res.data;
        this.checkId = this.typeList[0].id;
        this.getTableData();
      });
    },
    topClick(index) {
      if (this.checkId != this.typeList[index].id) {
        this.getTableData();
      }
      this.checkId = this.typeList[index].id;
    },
    //获取数据
    getTableData() {
      if (this.searchData) {
        get(
          "operate/expenseCate/index",
          {
            expenseCate_id: this.checkId,
            p: this.p,
            limit: this.limit,
            title: this.searchData,
          },
          (res) => {
            this.tableData = res.data._list;
            this.count = res.data.count;
          }
        );
      } else {
        get(
          "operate/expenseCate/index",
          {
            expenseCate_id: this.checkId,
            p: this.p,
            limit: this.limit,
          },
          (res) => {
            this.tableData = res.data._list;
            this.count = res.data.count;
          }
        );
      }
    },
    handleSizeChange(newSize) {
      this.limit = newSize;
      this.getTableData();
    },
    handleCurrentChange(newPage) {
      this.p = newPage;
      this.getTableData();
    },
    //添加用户组
    openAddGroupDialog() {},
    //添加用户组
    addGroup() {},
    //启用按钮
    enableBtn(value) {},
    //禁用按钮
    disableBtn(value) {},
    //搜索功能
    searchBtn() {
      this.getTableData();
    },
    //添加代报员
    addErrand() {
      this.dialogVisibleAddGroup = true;
    },

    // 权限设置数据
    setRole(row) {
      console.log(row);
      get("operate/errand/setExpenseCate", { id: row.id }, (res) => {
        console.log(res);
      });
      return;
    },

    // 取消报销分类
    deleteExpenseCate(item){
        this.$message("wait");
    }
  },
  watch: {
    searchData: function() {
      console.log(this.searchData);
      if (!this.searchData) {
        this.getTableData();
      }
      if (this.searchData) {
        this.isDisabled = false;
      }
    },
  },

  created() {
    this.getExpenseCate();
  },
};
</script>

<style lang="less" scoped>
.maxdiv {
  width: 100%;
  height: auto;
  box-shadow: 1px 1px 10px #ccc, -1px -1px 10px #ccc;
  padding-bottom: 20px;
  .top_main {
    border-bottom: 1px solid #ccc;
    // height: 40px;
    background: #f5f7fa;
    margin-bottom: 30px;
    .top_main_list {
      padding: 10px 22px;
      color: #909399;
      transition: 0.2s;
      font-size: 14px;
      background: #f5f7fa;
      &:hover {
        color: #409eff;
      }
      &:nth-child(1) {
        border-left: none;
      }
    }
    .clicked_top {
      color: #409eff;
      background: #fff;
      border-left: 1px solid #ccc;
      border-right: 1px solid #ccc;
      border-bottom: 1px solid #fff;
    }
  }
}
.clicked_top {
  color: #409eff;
  background: #fff;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #fff;
}
.el-breadcrumb {
  margin-bottom: 30px;
}
.el-input {
  margin: 0 30px 30px;
  width: 280px;
}
.el-pagination {
  margin-top: 30px;
  margin-left: 30px;
}
.addRulesWrap {
  margin-left: 80px;
}
.addRules {
  position: absolute;
  right: 25%;
  bottom: 5%;
}
.disable {
  margin-left: 15px;
}
.addErrand {
  margin-left: 80%;
}
.el-form-item__content {
  margin-left: 0px !important;
}
.delete{
    &:hover{
        color: red;
    }
}
</style>
